---
import GitHubIcon from "@components/icons/github";
import GithubStarButton from "./githubStarButton.astro";
import MobileNav from "./MobileNav.tsx";
---

<nav
  class="z-[1] flex p-[0.5%] xl:p-[1%] 2xl:p-[1.5%] text-white items-center justify-center w-full relative"
>
  <GithubStarButton />
  <div
    class="space-x-4 items-center justify-center hidden sm:flex sm:absolute right-2 md:right-4 2xl:right-6"
  >
    <a
      href="https://docs.rn.new/"
      class="hover:no-underline text-xl font-bold text-neutral-100 hover:bg-white/10 py-3 px-6 rounded-full duration-300"
    >
      Docs
    </a>
    <a
      target="_blank"
      rel="noreferrer noopener"
      class="text-neutral-100 hover:bg-white/10 rounded-full p-4 duration-300"
      href="https://github.com/roninoss/create-expo-stack"
    >
      <GitHubIcon className="h-8 w-8" />
    </a>
  </div>
</nav>
<MobileNav client:load />
